<template>
  <div>
    <el-radio-group @change="typeChanged" v-model="type" size="small">
      <el-radio-button label="water">水</el-radio-button>
      <el-radio-button label="electricity">电</el-radio-button>
      <el-radio-button label="gas">气</el-radio-button>
    </el-radio-group>
    <v-chart :options="orgOption" autoresize />
  </div>
</template>

<script>
export default {
  name: "HydropowerUsage",
  data() {
    return {
      type: "",
      data: [
        {
          name: "总量",
          from: "#248ff7",
          to: "#6851f1",
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 700, 1000, 400]
        },
        {
          name: "公摊量",
          from: "#8bd46e",
          to: "#09bcb7",
          data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 700, 1000, 400]
        },
        {
          name: "损耗量",
          from: "#fccb05",
          to: "#f5804d",
          data: [200, 200, 200, 50, 100, 300, 300, 600, 700, 700, 1000, 400]
        }
      ],
      category: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    };
  },
  computed: {
    orgOption() {
      return this.initData();
    }
  },
  methods: {
    initData() {
      let echart = this.$echarts;

      let series = [];
      let max = 0;

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "rgba(255,255,255,0.1)"
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "5%",
          top: "10%",
          containLabel: true
        },
        legend: {
          data: ["总量", "公摊量", "损耗量"],
          right: "5%",
          top: "0",
          textStyle: {
            color: "#fff"
          },
          itemWidth: 20,
          itemHeight: 15
        },
        xAxis: {
          type: "category",
          data: this.category,
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei"
            }
          }
        },
        yAxis: {
          type: "value",
          // max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)"
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            type: "inside"
          }
        ]
      };

      this.data.forEach(function(value) {
        max = Math.max(max, ...value.data);

        series.push({
          name: value.name,
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: value.from
                },
                {
                  offset: 1,
                  color: value.to
                }
              ]),
              barBorderRadius: 11
            }
          },
          data: value.data
        });
      });

      option.series = series;
      option.yAxis.max = max;

      return option;
    },
    typeChanged() {
      let data = [
        {
          name: "总量",
          from: "#248ff7",
          to: "#6851f1",
          data: []
        },
        {
          name: "公摊量",
          from: "#8bd46e",
          to: "#09bcb7",
          data: []
        },
        {
          name: "损耗量",
          from: "#fccb05",
          to: "#f5804d",
          data: []
        }
      ];
      switch (this.type) {
        case "water":
          data = data.map(t => {
            t.data = [
              100,
              200,
              300,
              400,
              600,
              100,
              200,
              300,
              400,
              500,
              900,
              1000
            ];
            return t;
          });
          break;
        case "gas":
          data = data.map(t => {
            t.data = [
              400,
              600,
              700,
              700,
              1000,
              400,
              400,
              600,
              700,
              700,
              1000,
              400
            ];
            return t;
          });
          break;
        default:
          data = data.map(t => {
            t.data = [
              800,
              900,
              700,
              700,
              900,
              500,
              600,
              700,
              800,
              900,
              1000,
              900
            ];
            return t;
          });
      }

      this.data = data;
    }
  }
};
</script>

<style scoped>
.echarts {
  height: 25vh !important;
}
</style>
